<template>
	<view class="userInfo">
		<view class="steps">
			<tui-steps :type="2" activeColor="#FCA544" :items="step" spacing="260rpx" :activeSteps="activeSteps"></tui-steps>
		</view>
		<view style="height: 20rpx;"></view>
		<tui-list-view v-if="activeSteps == 0">
			<tui-list-cell>
				<view class="cell">
					<view class="label">
						原手机号码
					</view>
					<view class="val">
						{{mobile}}
					</view>
				</view>
			</tui-list-cell>
			<tui-list-cell>
				<view class="cell">
					<view class="label">
						验证码
					</view>
					<view class="val">
						<input type="digit" v-model="code" placeholder="请输入验证码" />
						<button class="btn" size="mini" @tap="countDownPassCode" :disabled="disableGetMobileCode">{{getCodeButtonText}}</button>
					</view>
				</view>
			</tui-list-cell>
		</tui-list-view>
		<tui-list-view v-if="activeSteps == 1">
			<tui-list-cell>
				<view class="cell">
					<view class="label">
						新手机号码
					</view>
					<view class="val">
						<input type="number" v-model="newMobile" placeholder="请输入新手机号" maxlength="11"/>
					</view>
				</view>
			</tui-list-cell>
			<tui-list-cell>
				<view class="cell">
					<view class="label">
						验证码
					</view>
					<view class="val">
						<input type="digit" v-model="newCode" placeholder="请输入验证码" />
						<button class="btn" size="mini" @tap="countDownPassCode" :disabled="disableGetMobileCode1">{{getCodeButtonText1}}</button>
					</view>
				</view>
			</tui-list-cell>
		</tui-list-view>
		<view class="subBtns" v-if="activeSteps == 0">
			<view class="button" @click="next">下一步</view>
		</view>
		<view class="subBtns" v-if="activeSteps == 1">
			<view class="button" @click="submit">确定</view>
		</view>
	</view>
</template>

<script>
	const util = require("@/utils/util.js")
	const app = getApp()
	export default {
		name: '',
		components: {

		},
		props: {

		},
		data() {
			return {
				userInfo: {},
				disabled: false,
				step: [{
					title: "验证原号码"
				}, {
					title: "绑定新手机"
				}],
				activeSteps: 0,

				mobile: '',
				newMobile: '',
				code: '',
				isSend: false,
				disableGetMobileCode: false,
				disableSubmitMobileCode: true,
				getCodeButtonText: '获取验证码',
				
				newCode: '',
				isSend1: false,
				disableGetMobileCode1: false,
				disableSubmitMobileCode1: true,
				getCodeButtonText1: '获取验证码',
			};
		},
		computed: {

		},
		watch: {

		},
		onLoad() {
			util.request('user/baseInfo').then(res => {
				if (res.code === 0) {
					if (res.data.mobile) {
						this.mobile = util.formatNumber(res.data.mobile);
					}
					this.userInfo = res.data;
				}
			});
		},
		onShow() {

		},
		methods: {
			countDownPassCode: function() {
				let that = this;
				if (this.activeSteps == 0) {
					if (!util.isMobile(that.userInfo.mobile)) {
						return util.toast('请输入正确的手机号');
					}
					uni.showLoading({
						title: '发送中...'
					})
					util.request('index/smsCode', {
							phone: that.userInfo.mobile
						}, 'POST', 'application/json')
						.then(function(res) {
							console.log(res);
							if (res.code == 0) {
								that.isSend = true
								util.toast(res.msg)
								var i = 60;
								var intervalId = setInterval(function() {
									i--
									if (i <= 0) {
										that.disableGetMobileCode = false
										that.disableSubmitMobileCode = false
										that.getCodeButtonText = '获取验证码'
										clearInterval(intervalId)
									} else {
										that.getCodeButtonText = i
										that.disableGetMobileCode = true
										that.disableSubmitMobileCode = false
									}
								}, 1000);
							} else {
								util.toast('发送失败');
							}
						});
				} else {
					if (that.newMobile == that.userInfo.mobile) {
						return util.toast('新手机号与原手机号相同');
					}
					if (!util.isMobile(that.newMobile)) {
						return
					}
					uni.showLoading({
						title: '发送中...'
					})
					util.request('index/smsCode', {
							phone: that.newMobile
						}, 'POST', 'application/json')
						.then(function(res) {
							if (res.code == 0) {
								that.isSend1 = true
								util.toast(res.msg)
								var i = 60;
								var intervalId = setInterval(function() {
									i--
									if (i <= 0) {
										that.disableGetMobileCode1 = false
										that.disableSubmitMobileCode1 = false
										that.getCodeButtonText1 = '获取验证码'
										clearInterval(intervalId)
									} else {
										that.getCodeButtonText1 = i
										that.disableGetMobileCode1 = true
										that.disableSubmitMobileCode1 = false
									}
								}, 1000);
							} else {
								util.toast('发送失败');
							}
						});
				}
				
			},
			next() {
				if (!this.code) {
					return util.toast('请输入验证码');
				}
				uni.showLoading({
					title: '提交中...'
				})
				util.request('user/checkMobile/' + this.userInfo.mobile + '/' + this.code, {}).then(res => {
					uni.hideLoading();
					console.log(res);
					if (res.code == 0) {
						this.activeSteps = 1;
					} else {
						util.toast(res.msg);
					}
				});
			},
			submit() {
				if (!this.newMobile) {
					return util.toast('请输入新手机号');
				}
				if (!this.newCode) {
					return util.toast('请输入验证码');
				}
				uni.showLoading({
					title: '提交中...'
				})
				util.request('user/updateMobile', {mobile: this.newMobile,code: this.newCode,oldMobile: this.userInfo.mobile}, 'POST').then(res => {
					uni.hideLoading();
					if (res.code == 0) {
						uni.clearStorage({
							success() {
								util.toast('修改成功,请重新登录');
								setTimeout(function() {
									uni.reLaunch({
										url: '/pages/index/index',
									})
								}, 1000)
							}
						})
					} else {
						util.toast(res.msg);
					}
				});
			}
		},
	};
</script>

<style lang="scss">
	.userInfo {
		.steps {
			width: 100%;
			padding: 40rpx 0;
			background: #fff;
		}

		.head {
			width: 100%;
			padding: 60rpx 0;
			background: #fff;
			text-align: center;

			.icon {
				width: 100rpx;
				height: 100rpx;
			}

			.text {
				font-size: 28rpx;
				color: #333;
				padding-top: 10rpx;
			}
		}

		.cell {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			color: #333;
			font-size: 26rpx;

			.label {
				width: 160rpx;
				flex-shrink: 0;
			}

			.val {
				width: 100%;
				position: relative;
				input {
					font-size: 26rpx;
				}
				.gender {
					margin: 0 30rpx 0 20rpx;
				}

				.btn {
					position: absolute;
					right: 0;
					top: -10rpx;
					z-index: 100;
					width: 160rpx;
					font-size: 22rpx;
					color: #FCA544;
					background: none;
					border-left: 1px solid #EAE9E8;
					padding: 0;
					border-radius: 0;
				}
			}
		}
	}
</style>
